<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      <el-avatar
        fit="contain"
        src="https://img1.baidu.com/it/u=584277447,4053733688&fm=26&fmt=auto&gp=0.jpg"
      ></el-avatar>
      {{ name === 'coderwhy' ? 'Eason' : name }}
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="exitClick">退出登录</el-dropdown-item>
        <el-dropdown-item>系统管理</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts" setup>
import { computed } from '@vue/runtime-core'
import { useStore } from 'vuex'
import localCache from '@/utils/cache'
import { useRouter } from 'vue-router'

const router = useRouter()
const store = useStore()
const name = computed(() => store.state.login.userInfo.name)

const exitClick = () => {
  localCache.deleteCache('token')
  router.push('/main')
}
</script>
<style lang="less">
el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style>
